<template>
    <div>
        <a-modal
            :title="isView?'查看培训记录':(fromState.id?'编辑培训记录':'添加培训记录')"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            class="training-records-model-px"
            :width="1020"
        >
        <!-- bordercolor="#d9d9d9" -->
            <table border="1" style="width: 100%;" bordercolor="#d9d9d9" v-if="visible">
                <tr>
                    <td class="title-v-td">认定类型：</td>
                    <td colspan="3">
                        <div style="display: flex;align-items: center;" v-if="!isView">
                            <!-- fpxlx -->
                            <compSelector
                                :key="compSelectorkey"
                                v-model="classAType"
                                :defaultValue="classAType"
                                compType="Select"
                                dictionaryType="培训认定类型一级"
                                placeholder="培训认定类型一级"
                            />
                            <span>—</span>
                            <compSelector
                                :key="compSelectorkey"
                                v-model="classBType"
                                :defaultValue="classBType"
                                compType="Select"
                                dictionaryType="培训认定类型二级"
                                placeholder="培训认定类型二级"
                            />
                        </div>
                        <span v-else>{{ fromState.fpxlx }}</span>
                    </td>
                </tr>
                <tr>
                    <td class="title-v-td">
                        <div style="display: flex;align-items: center;justify-content: flex-end;">
                            <span class="asterisk-v">*</span>
                            <span>认定内容：</span>
                        </div>
                    </td>
                    <td colspan="3">
                        <a-form :form="form" >
                            <a-form-item >
                                <a-textarea
                                    v-model:value="fromState.fpxmc"
                                    :readOnly="isView"
                                    style="width: 100%;"
                                    placeholder="请输入认定内容"
                                    :autosize="{ minRows: 3, maxRows: 10000 }"
                                    v-decorator="['fpxmc', { initialValue:fromState.fpxmc, rules: rules.fpxmc}]"
                                ></a-textarea>
                            </a-form-item>
                        </a-form>
                    </td>
                </tr>
                <tr>
                    <td class="title-v-td">
                        <div style="display: flex;align-items: center;justify-content: flex-end;">
                            <span class="asterisk-v">*</span>
                            <span>开始时间：</span>
                        </div>
                    </td>
                    <td>
                        <a-form layout="inline" :form="form" v-if="!isView">
                            <a-form-item >
                                <a-date-picker
                                placeholder="请输入培训开始时间" 
                                :show-time="{ format: 'HH:mm' }"
                                format="YYYY-MM-DD HH:mm"
                                :defaultValue="fromState.fpxkssj"
                                v-decorator="['fpxkssj', { initialValue:fromState.fpxkssj, rules: rules.fpxkssj}]"
                                @change="($event)=>{timeChange($event,'fpxkssj')}"
                                />
                            </a-form-item>
                        </a-form>
                        <span v-else>{{ moment(fromState.fpxkssj).format('YYYY-MM-DD HH:mm') }}</span>
                    </td>
                    <td class="title-v-td">
                        <div style="display: flex;align-items: center;justify-content: flex-end;">
                            <span class="asterisk-v">*</span>
                            <span>结束时间：</span>
                        </div>
                    </td>
                    <td>
                        <a-form layout="inline" :form="form" v-if="!isView">
                            <a-form-item >
                                <a-date-picker
                                placeholder="请输入培训结束时间" 
                                :show-time="{ format: 'HH:mm' }"
                                format="YYYY-MM-DD HH:mm"
                                :defaultValue="fromState.fpxkssj"
                                v-decorator="['fpxjssj', { initialValue:fromState.fpxjssj, rules: rules.fpxjssj}]"
                                @change="($event)=>{timeChange($event,'fpxjssj')}"
                                />
                            </a-form-item>
                        </a-form>
                        <span v-else>{{ moment(fromState.fpxjssj).format('YYYY-MM-DD HH:mm') }}</span>
                    </td>
                </tr>
                <tr>
                    <td class="title-v-td">
                        <div style="display: flex;align-items: center;justify-content: flex-end;">
                            <!-- <span class="asterisk-v">*</span> -->
                            <span>申请学时：</span>
                        </div>
                    </td>
                    <td>
                        <a-form layout="inline" :form="form" v-if="!isView">
                            <a-form-item >
                                <div style="display: flex;flex-direction: column;">
                                    <a-input-number
                                    style="width: 100%;"
                                    v-model:value="fromState.fpxxs"
                                    placeholder="请输入申请学时"
                                    :min="0"
                                    :step="0"
                                    />
                                    <span v-if="tipFpxxs" style="color: #f5222d;">{{ tioFpxxsText }}</span>
                                    <!-- v-decorator="['fpxxs', { initialValue:fromState.fpxxs, rules: rules.fpxxs}]" -->
                                    <!-- <a-button v-if="!isView" class="blue-btn" style="margin-left: 15px;" @click="classHour" type="primary">生成学时</a-button> -->
                                </div>
                            </a-form-item>
                        </a-form>
                        <span v-else>{{ fromState.fpxxs }}</span>
                    </td>
                    <td class="title-v-td">计入年度：</td>
                    <td>
                        <a-form layout="inline" :form="form" v-if="!isView">
                            <a-form-item >
                                <a-input
                                    v-model:value="fromState.fjlnd"
                                    placeholder="请输入计入年度"
                                />
                            </a-form-item>
                        </a-form>
                        <span v-else>{{ fromState.fjlnd }}</span>
                    </td>
                </tr>
                <tr>
                    <td class="title-v-td">
                        <div style="display: flex;align-items: center;justify-content: flex-end;">
                            <span class="asterisk-v">*</span>
                            <span>认定内容说明：</span>
                        </div>
                    </td>
                    <td colspan="3">
                        <a-form :form="form" >
                            <a-form-item >
                                <a-textarea
                                    :readOnly="isView"
                                    v-model:value="fromState.fpxnr"
                                    style="width: 100%;"
                                    placeholder="请输入认定内容说明"
                                    :autosize="{ minRows: 3, maxRows: 10000 }"
                                    v-decorator="['fpxnr', { initialValue:fromState.fpxnr, rules: rules.fpxnr}]"
                                ></a-textarea>
                            </a-form-item>
                        </a-form>
                    </td>
                </tr>
                <tr>
                    <td class="title-v-td">证书编号：</td>
                    <td colspan="3">
                        <a-form layout="inline" :form="form" v-if="!isView">
                            <a-form-item >
                                <a-input
                                    v-model:value="fromState.fpxzsbh"
                                    placeholder="请输入证书编号"
                                />
                            </a-form-item>
                        </a-form>
                        <span v-else>{{ fromState.fpxzsbh }}</span>
                    </td>
                </tr>
                <tr>
                    <td class="title-v-td">上传附件：</td>
                    <td colspan="3">
                        <a-upload v-if="!isView" style="display: inline-block;" :beforeUpload="beforeUpload" :showUploadList="false" action="" @change="importTraining">
                            <a-button class="blue-btn" type="primary" @click="uploadClick" >上传</a-button>
                        </a-upload>
                        <div style="margin:10px 0;">
                            <div v-for="(item,index) in fileList" :key="index" style="margin:5px 0;">
                                <a @click="uploadFile(item)">{{ item.fwjxsmc+item.fwjlx }}</a>
                                <a-icon v-if="!isView" style="margin-left:10px;" type="delete" @click="deleteFile(item)"/>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <template slot="footer">
                <div>
                    <a-button @click="visible = false" >{{isView?'关闭':'取消'}}</a-button>
                    <a-button v-if="!isView" class="blue-btn" style="margin-left: 15px;" @click="handleOk(true)" type="primary">保存</a-button>
                    <a-button v-if="!isView" class="blue-btn" style="margin-left: 15px;" @click="handleOk(false)" type="primary">保存并关闭</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {
    sysUserPxjladdPxjl,
    sysUserPxjlqueryById,
    sysUserPxjleditPxjl,
    sysUserPxjluploadPxjlFile,
    sysUserPxjlqueryPxjlFileList,
    sysUserPxjldeletePxjlFileById,
    sysUserPxjlgetPxjlFile,
    sysUserPxjlgetPxxs,
} from './service/index'
import moment from 'moment'
import compSelector from '@/components/compSelector/compSelector.vue'
import blobType from '@/common/blobType'
export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            isView:false,
            visible:false,
            form:this.$form.createForm(this, { name: 'trainingRecordsFrom' }),
            fromState:{},
            compSelectorkey:null,
            classAType:'',
            classBType:'',
            pxxsNum:0,
            tipFpxxs:false,
            tioFpxxsText:'每天最多8小时学时，请重新填写',
            rules:{
                fpxmc: [{
                    required: true,
                    message: '请输入认定内容',
                }],
                fpxkssj: [{
                    type:'object',
                    required: true,
                    message: '请输入培训开始时间',
                }],
                fpxjssj: [{
                    type:'object',
                    required: true,
                    message: '请输入培训结束时间',
                }],
                fpxxs: [{
                    required: true,
                    message: '请输入申请学时',
                }],
                fpxnr: [{
                    required: true,
                    message: '请输入认定内容说明',
                }],
                
            },
            fileList:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val,isView){
            this.tipFpxxs = false
            this.isView = isView
            if(val.id){
                sysUserPxjlqueryById({id:val.id}).then(res=>{
                    if(res.code ==  200){
                        this.fromState = res.result
                        this.fromState.fpxkssj = this.fromState.fpxkssj?moment(this.fromState.fpxkssj):''
                        this.fromState.fpxjssj = this.fromState.fpxjssj?moment(this.fromState.fpxjssj):''
                        this.classAType = this.fromState.fpxlx.indexOf('—') !== -1?this.fromState.fpxlx.split('—')[0]:this.fromState.fpxlx
                        this.classBType = this.fromState.fpxlx.indexOf('—') !== -1?this.fromState.fpxlx.split('—')[1]:''
                    }else{
                        this.$message.warning(res.message)
                    }
                })
                sysUserPxjlqueryPxjlFileList({id:val.id}).then(res=>{
                    if(res.code ==  200){
                        //console.log(res.result)
                        this.fileList = res.result
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                this.fromState = {}
                this.classAType = ''
                this.classBType = ''
                this.fileList = []
            }
        },
        timeChange(val,name){
            //console.log(val)
            this.fromState[name] = val
            if(this.fromState.fpxkssj && this.fromState.fpxjssj){
                this.classHour(1)
            }
        },
        classHour(val){
            // if(!this.fromState.fpxkssj && !this.fromState.fpxjssj){
            //     this.$message.warning('请先选择开始时间和结束时间')
            //     return false
            // }
            // if(!this.fromState.fpxkssj){
            //     this.$message.warning('请先选择开始时间')
            //     return false
            // }
            // if(!this.fromState.fpxjssj){
            //     this.$message.warning('请先选择结束时间')
            //     return false
            // }
            if(this.fromState.fpxkssj && this.fromState.fpxjssj){
                sysUserPxjlgetPxxs({fpxkssj:moment(this.fromState.fpxkssj).format('YYYY-MM-DD HH:mm'),
                fpxjssj:moment(this.fromState.fpxjssj).format('YYYY-MM-DD HH:mm')}).then(res=>{
                    if(res.code == 200){
                        // if(!this.fromState.fpxxs){
                        //     this.fromState.fpxxs = res.result.fpxxs
                        //     this.form.setFieldsValue({
                        //         fpxxs:res.result.fpxxs,
                        //     });
                        // }
                        
                        // if(!val){
                        //     this.$message.success(res.message)
                        // }
                        this.pxxsNum = res.result.fpxxs
                    }
                    // else{
                    //     this.$message.warning(res.message)
                    // }
                })
            }
            
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if(!err && this.fromState.fpxxs && this.pxxsNum >= this.fromState.fpxxs){
                    this.tipFpxxs = false
                    let data = {
                        ...this.fromState,
                        fpxkssj:this.fromState.fpxkssj?moment(this.fromState.fpxkssj).format('YYYY-MM-DD HH:mm'):'',
                        fpxjssj:this.fromState.fpxjssj?moment(this.fromState.fpxjssj).format('YYYY-MM-DD HH:mm'):'',
                        fpxlx:this.classAType||this.classBType?this.classAType+'—'+this.classBType:'',
                    }
                    if(this.fromState.id){
                        sysUserPxjleditPxjl(data).then(res=>{
                            if(res.code == 200){
                                this.getData({id:this.fromState.id})
                                this.visible = val
                                this.$emit('sussecTraining')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                        sysUserPxjladdPxjl(data).then(res=>{
                            if(res.code == 200){
                                this.visible = val
                                this.getData({id:res.result.id})
                                this.$emit('sussecTraining')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }else{
                    if(!this.fromState.fpxxs){
                        this.tipFpxxs = true
                        this.tioFpxxsText = '请输入申请学时'
                        return false
                    }
                    if(this.pxxsNum < this.fromState.fpxxs ){
                        this.tipFpxxs = true
                        this.tioFpxxsText = '每天最多8小时学时，请重新填写'
                    }else{
                        this.tipFpxxs = false
                    }
                }
            })
            
        },
        beforeUpload(){
            return false
        },
        uploadClick(){
            //console.log('我在上传',this.fromState)
            if(!this.fromState.id){
                let data = {
                    ...this.fromState,
                    fpxkssj:this.fromState.fpxkssj?moment(this.fromState.fpxkssj).format('YYYY-MM-DD HH:mm'):'',
                    fpxjssj:this.fromState.fpxjssj?moment(this.fromState.fpxjssj).format('YYYY-MM-DD HH:mm'):'',
                    fpxlx:this.classAType||this.classBType?this.classAType+'—'+this.classBType:'',
                }
                sysUserPxjladdPxjl(data).then(res=>{
                    if(res.code == 200){
                        this.fromState.id = res.result.id
                        this.getData({id:res.result.id})
                        this.$emit('sussecTraining')
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            
        },
        importTraining({file}){
            var that = this
            if(typeof file.uid !== 'undefined') {
                const fileData = new FormData();
                fileData.append("file",file);
                fileData.append("id",this.fromState.id);
                sysUserPxjluploadPxjlFile(fileData).then(res => {
                    this.getData({id:this.fromState.id})
                    that.$message.success('上传成功')
                }).catch(error =>{
                    that.$message.success('上传失败')
                })
                
            }
        },
        uploadFile(val){
            var that = this
            var fileName = val.fwjccmc 
            let param = { id:val.id}

            sysUserPxjlgetPxjlFile(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                    let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + val.fwjlx)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
            })
        },
        deleteFile(item){
            let that = this
            this.$confirm({
                title:'确认要删除吗？',
                onOk() {
                    sysUserPxjldeletePxjlFileById({id:item.id}).then(res=>{
                        if(res.code == 200){
                            that.getData({id:that.fromState.id})
                            that.$message.success(res.message)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
    }
}
</script>
<style lang="less">
.training-records-model-px{
    td{
        padding: 10px;
        
    }
    .title-v-td{
        text-align: right;
        font-size: 16px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        background-color:#e6f7ff;
    }
    .asterisk-v{
        display: inline-block;
        color: #f5222d;
        padding-right: 5px;
        font-size: 20px;
        width: 16px;
        height: 16px;
        line-height: 20px;
    }
    .ant-form-item{
        margin-bottom: 0;
    }
    .training-records-form{
        .ant-form-item-label{
            width: 100px;
        }
        .flex-tr-er{
            .ant-form-item-control-wrapper{
                width: 480px;
            }
            
        }
        .ant-form-item{
            margin: 10px 0;
        }
    }
}
    
</style>